<template>
  <div class="container">
      <div class="desc">
          <span >搜索到{{dataCount}}条与</span>
          <span style="color:#FDD835">"{{key}}"</span>
          <span>有关的记录</span>
      </div>
      <div class="list">
            <v-list :isDetial="false" :isHome="false"  :Data="movieData" ></v-list>
      </div>
      <div class="tips">
         <router-link to="/message">实在没有点此求片留言</router-link>
         <p class="tip">搜索小技巧：建议用影片前二字搜索</p>
      </div>
      <div class="pagintion">
          <v-pagination :isSearch="true" :key="key" @refesh="refesh" :length="dataCount"></v-pagination>
      </div>
      <div class="loading" v-if="isLoading">
        <van-loading size="50px" type="spinner" />
    </div>
  </div>
</template>

<script>
import {  reactive, toRefs , onMounted} from '@vue/runtime-core'
import {useRouter,onBeforeRouteUpdate} from 'vue-router'
import axios from 'axios'
import VList from '../components/List.vue'
import VPagination from '../components/Pagination.vue'
export default {
    components:{
        "v-list":VList,
        "v-pagination":VPagination
    },
    setup(){
        const router = useRouter()
        const state = reactive({
            movieData:[],
            dataCount:0,
            key:'',
            isLoading:true
        })
        onMounted(()=>{
            refesh()
        })
        const refesh = (e) =>{
            console.log(e);
            state.key= router.currentRoute.value.params.id
            console.log(router.currentRoute.value.params.id)
            if (e === undefined) {//一开始进入页面执行
                 axios.get('/api/search',{
                    params:{
                        wd:state.key
                    }
                }).then(res=>{
                    console.log(res.data);
                    state.movieData = res.data.movie
                    state.dataCount = res.data.dataCount
                    state.isLoading = false
                })
            }else{//使用分页请求数据
                axios.get(`/api${e}`,{
                    params:{
                        wd:state.key
                    }
                }).then(res=>{
                    console.log(res.data);
                    state.movieData = res.data.list
                    state.dataCount = res.data.dataCount
                    state.isLoading = false
                })
            }
        }
        onBeforeRouteUpdate( to =>{
           refesh()
           console.log(to.params, to.query)
        })
        return{
            ...toRefs(state),
            refesh
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    .desc{
        padding-top: 10px;
        text-align: center;
        span{
            color: #fff;
            font-size: 14px;
        }
    }
    .list{
        margin-top: 30px;
    }
    .tip{

    }
    .tips{
        text-align: center;
        color: #fff;
        a{
            color: #fff;
            background: -webkit-linear-gradient(right top, #64dfc6, #44c6ac);
            font-size: 16px;
            padding: 2px;
        } 
    }
    .pagintion{
        margin-top: 20px;
    }
    .loading{
    position: fixed;
    top: calc(50vh - 25px);
    left: calc(50vw - 25px);
}
}
</style>